<!DOCTYPE html>
<!-- saved from url=(0052)http://49.233.183.177:8080/addressbook/register.html -->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>注册</title>

    <link href="css/sb-admin-2.min.css" rel="stylesheet">
    <!-- 引入样式 -->
    <link href="css/css/index.css" rel="stylesheet" type="text/css"/>
    <!-- 引入VUE库 -->
    <script src="js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="js/js/js/index.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>

<body style="background-color: darkgray;background-image: url(image/bg9.jpg)">

<div class="container">

    <div class="card o-hidden border-0 shadow-lg my-5">
        <div class="card-body p-0">
            <!-- Nested Row within Card Body -->
            <div>
                <div style="background-color: #00C2FF" id="app">
                    <div class="p-5">
                        <div class="text-center">
                            <h1 class="h4 text-gray-900 mb-4">用户注册</h1>
                        </div>
                        <form class="user" enctype="multipart/form-data" action="RegisterServlet"  method="post" onSubmit="return beforeSubmit(this)">
                            <div style="display: flex;width: 100%;margin-top: 10px;height: 100px;padding-top: 10px">
                                <label for="uploadImg">
                                    <img :src="uploadImgUrl" alt="点击上传头像" style="height: 100px;width: 100px">
                                </label>
                                <input type="file" id="uploadImg" name="file" style="display: none" accept="image/jpeg,image/x-png,image/gif" v-on:change="uploadImg($event)">
                            </div>

                            <div class="form-group">
                                <input type="number" class="form-control form-control-user" id="regist_phone"
                                       name="regist_phone" placeholder="请输入电话号码">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control form-control-user" id="regist_name"
                                       name="regist_name" placeholder="请输入昵称">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control form-control-user" id="regist_pwd"
                                       name="regist_pwd" placeholder="请输入密码">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control form-control-user" id="regist_pwd_con"
                                       name="regist_pwd_con" placeholder="确认密码">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control form-control-user" id="regist_realname"
                                       name="regist_realname" placeholder="请输入姓名(选填)">
                            </div>
                            <div class="form-group">
                                <select id="regist_sex" name="regist_sex">
                                    <option selected disabled>请选择性别(选填)</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="number" class="form-control form-control-user" id="regist_age"
                                       name="regist_age" placeholder="请输入年龄(选填)">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control form-control-user" id="regist_e-mail"
                                       name="regist_e-mail" placeholder="请输入邮箱(选填)">
                            </div>
                            <font color="red"></font>
                            <button type="submit" class="btn btn-primary btn-user btn-block" id="registsubmit">注册
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script >
    var v = new Vue({
        el: "#app",
        data: {
            uploadImgUrl:'',
        },
        methods: {
            uploadImg(e){
                let that = this;
                let file = e.target.files[0];
                //KB单位,可以获取图片的大小，到时候可以根据图片大小进行选择上传
                let imgSize = file.size/1024;

                let reader = new FileReader();
                reader.readAsDataURL(file);
                console.info(this.uploadImgUrl)

                reader.onloadend = function () {
                    // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
                    let dataURL = reader.result;
                    //在这里就可以进行图片地址的获取了，到时候后台上传的图片就是根据这个来的
                    //that.uploadImgUrl = dataURL;这个就是展示了上传的图片
                    that.uploadImgUrl = dataURL;
                    //这里就可以发送请求了，也可以选择之后发送，反正图片地址都获取了
                    $.ajax({
                        type:"post",
                        url:"上传的地址",
                        async:true,
                        data:{
                            imgUrl:dataURL,
                            avatar_wx:1,
                            token:token,
                            uid:uid,
                        },
                        success:function(e){
                            that.avatar=dataURL;
                            alert('修改成功');
                        }
                    });
                }
            },
        }
    })
</script>
<script type="text/javascript">
    function beforeSubmit(form){
        if(form.regist_phone.value==''){
            alert('电话号码不能为空！');
            form.regist_phone.focus();
            return false;
        }
        if(form.regist_phone.value.length>12){
            alert('电话号码输入错误！');
            form.regist_phone.focus();
            return false;
        }
        if(form.regist_name.value==''){
            alert('昵称不能为空！');
            form.regist_name.focus();
            return false;
        }
        if(form.regist_pwd.value.length<6){
            alert('密码至少为6位，请重新输入！');
            form.regist_pwd.focus();
            return false;
        }
        if(form.regist_pwd_con.value!=form.regist_pwd.value) {
            alert('你两次输入的密码不一致，请重新输入！');
            form.regist_pwd_con.focus();
            return false;
        }
        return true;
    }
</script>
</body>
</html>